import React, { Component } from "react";
import styles from "./index.module.scss";
// 组件
import AddRecord from "./AddRecord";
import BookManage from "./BookManage";
// api
import { listBook } from 'api/bill';
// 插件
import { Button, Checkbox, Form, Input, message, Select } from "antd";
import classNames from "classnames";
import ReactEcharts from "echarts-for-react";
import { createBook, getSceneList } from "api/bill";

export default class AccountBook extends Component {
  state = {
    addDisplay: false,
    showBookManage: false,
    accountBookId: "",
    showCreateBook: false, // 显示创建账本
    sceneList: [], // 场景列表
    bookList: [], // 账单列表
  };
  componentDidMount() {
    this.handleListBook()
  }
  handleListBook = async () => {
    const res = await listBook()
    // console.log('res', res)
    if(res.code == '200') {
      this.setState({
        bookList: res.data,
        accountBookId: res.data.find(item => item.initIs == 0)?.id
      })
    }
  }
  showBookManage = () => {
    this.setState({
      showBookManage: true,
    });
  };
  addRecord = () => {
    // 跳转到添加记录页面
    // this.props.history.push('/addRecord')
    this.setState({
      addDisplay: true,
    });
  };
  closeAdd = () => {
    this.setState({
      addDisplay: false,
    });
  };
  closeBookManage = () => {
    this.setState({
      showBookManage: false,
    });
  };

  getOption = () => {
    let option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      xAxis: {
        type: "time",
        name: "",
        axisTick: {
          alignWithLabel: true,
        },
      },
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          // name: 'Direct',
          type: "bar",
          barWidth: "20%",
          data: [10, 52, 200, 334, 390, 330, 220],
        },
      ],
    };
    return option;
  };
  closeCreate = () => {
    this.setState({
      showCreateBook: false,
    });
  };
  handleSceneList = async () => {
    const res = await getSceneList()
    this.setState({
      sceneList: res.data
    })
    console.log('res', res)
  };
  onFinishCreate = async (values) => {
    console.log("values", values);
    const res = await createBook({
      ...values,
      initIs: 1
    })
    if(res.code == '200') {
      message.success('创建成功')
      this.setState({
        showCreateBook: false,
      })
    }
  };
  onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  render() {
    const { addDisplay, showBookManage, showCreateBook,sceneList,bookList, accountBookId } = this.state;
    return (
      <div className={styles.accountBook}>
        {/* 首页 */}
        <div className={classNames("homePage", { leftWhole: addDisplay })}>
          <div className="toolbar">
            <div className="bookChoose" onClick={this.showBookManage}>
              <img src="" alt="" />
              <span className="nameWrap">
                <span>
                  {bookList.find((item) => item.initIs == 0)?.name ??
                    "无默认账本"}
                </span>
                <span>↓</span>
              </span>
            </div>
            <div className="rightBtns">
              <span className="searchBtn">搜索</span>
              <span className="refresh" title="刷新">
                刷新
              </span>
              <span className="statisticalReport" title="统计报表">
                统计报表
              </span>
              <span className="addNew" onClick={this.addRecord}>
                记一笔
              </span>
            </div>
          </div>
          <div className="content">
            <div className="left">
              <div className="importantData">
                <div className="importantItem">支出</div>
                <div className="importantItem">收入</div>
                <div className="importantItem">结余</div>
              </div>
              <div className="incomeExpanse">
                <span>收支分布</span>
                <ReactEcharts
                  option={this.getOption()} // option：图表配置项
                  // onEvents={onEvents}
                  // notMerge={true}
                  // lazyUpdate={true}
                  style={{ height: "230px", left: "12px", top: "-8px" }}
                />
              </div>
              <div className="proportion"></div>
            </div>
            <div className="right">
              <div className="calendar"></div>
              <div className="recentData"></div>
            </div>
          </div>
        </div>
        {/* {showBookManage && <div className="mask"></div>} */}
        {showBookManage && (
          <BookManage
            bookList={bookList}
            showCreate={() => {
              this.handleSceneList();
              this.setState({
                showCreateBook: true,
              });
            }}
            close={this.closeBookManage}
          />
        )}
        {showCreateBook && (
          <div className="createBook">
            <Form
              name="createBook"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              style={{
                maxWidth: 600,
              }}
              onFinish={this.onFinishCreate}
              onFinishFailed={this.onFinishFailed}
            >
              <Form.Item
                label="账本名称"
                name="name"
                rules={[
                  {
                    required: true,
                    message: "Please input your username!",
                  },
                ]}
              >
                <Input placeholder="账本名称" />
              </Form.Item>
              <Form.Item label="场景" name="sceneId">
                <Select
                  allowClear
                  fieldNames={{ label: "sceneName", value: "sceneId" }}
                  filterOption={(input, option) =>
                    (option?.label ?? "")
                      .toLowerCase()
                      .includes(input.toLowerCase())
                  }
                  options={sceneList}
                />
              </Form.Item>
              <Form.Item
                label="是否分享"
                valuePropName="checked"
                name="shareIs"
              >
                <Checkbox></Checkbox>
              </Form.Item>
              <Form.Item label="备注" name="remark">
                <Input placeholder="账本名称" />
              </Form.Item>
              <Form.Item label={null}>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
                <Button type="default" onClick={this.closeCreate}>
                  取消
                </Button>
              </Form.Item>
            </Form>
          </div>
        )}
        {
          addDisplay && (
            <AddRecord display={addDisplay} accountBookId={accountBookId}close={this.closeAdd} />
          )
        }
      </div>
    );
  }
}
